//转场动画
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active,
.slide-opacity-hide-enter-active,
.slide-opacity-show-enter-active .slide-opacity-show-leave-active,
.slide-opacity-hide-leave-active {
  // 启用硬件加速
  will-change: transform;
  position: fixed;
}

.slide-opacity-show-enter-active,
.slide-opacity-show-leave-active,
.slide-opacity-hide-enter-active,
.slide-opacity-hide-leave-active {
  transition: all 300ms;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 200ms;
}

body,
html,
#app {
  overflow-x: hidden;
  height: 100%;
}

html {
  background-color: #F5F5F4;
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.app-layout-wrapper,
.app-layout-wrapper>.page {
  width: 100%;
  height: 100%;
}

.placeholder {
  display: block;
  height: 50px;
}

.app-layout-wrapper.active {
  .comments-from-box.page .top-tis .save {
    padding: calc(50px + env(safe-area-inset-top)) 20px 20px;
  }

  .app-home .home-header {
    padding: calc(58px + env(safe-area-inset-top)) calc(25px + 5%);
  }

  .app-home .home-header .lines {
    height: 120px;
  }

  .mall-search {
    padding: calc(45px + env(safe-area-inset-top)) 0 0;
  }

  .shop-coupon-list {
    padding: calc(45px + env(safe-area-inset-top)) 0 0;
  }

  .search-box {
    .mall-search {
      padding: calc(45px + env(safe-area-inset-top)) 0 0 30px;
    }
  }

  .my {
    .order-state {
      margin: calc(-100px + env(safe-area-inset-top)) 25px 0;
    }

    .top-hd {
      height: 430px;
      padding: calc(124px + env(safe-area-inset-top)) calc(45px + 4%) 184px;
    }
  }

  .my-order {
    .hd-bar {
      height: 333px;
    }

    .user-info {
      // margin-top:-10px;
    }
  }

  .van-nav-bar {
    padding: 50px 0 0 0;
    height: auto;

    .van-nav-bar__left {
      top: 50px;
    }

    &::after {
      display: none;
    }
  }

  .integral {
    .hd-bar {
      height: 400px;
    }
  }

  .Login,
  .register {
    box-sizing: border-box;
    padding-top: calc(40px + env(safe-area-inset-top));

    .close {
      top: calc(70px + env(safe-area-inset-top));
    }
  }

  .wallet {
    .hd-bar {
      height: 400px;
    }
  }

  .address-box {
    .van-pull-refresh {
      height: calc(100% - 142px);
      min-height: calc(100% - 142px);
    }
  }

  .balance-bonus {
    .content {
      height: calc(100% - 142px);
    }
  }

  // .mall .content{
  //   height: calc(100% - 258px);
  // }

  .goods .swipe .van-icon {
    top: 70px;
  }
}

.van-notify {
  padding-top: 50px;
}

.slide-right-enter {
  opacity: 0;
  transform: translate(-100%, 0);
  transition-timing-function: ease-out;
}

.slide-right-leave-active {
  opacity: 0;
  // 安卓手机上同时进行离开和进入会出现闪白现象，暂时不启用离开动画
  transform: translate(100%, 0);
  transition-timing-function: cubic-bezier(0.5, 0, 1, 1);
}

.slide-left-enter {
  opacity: 0;
  width: 100%;
  transform: translate(100%, 0);
  transition-timing-function: ease-in;
}

.slide-left-leave-active {
  opacity: 0;
  //安卓手机上同时进行离开和进入会出现闪白现象，暂时不启用离开动画
  transition-timing-function: cubic-bezier(0.5, 0, 1, 1);
  transform: translate(-100%, 0);
}

.slide-opacity-hide-enter {
  opacity: 0;
  transition-timing-function: ease-out;
}

.slide-opacity-hide-leave-active {
  opacity: 0;
  // 安卓手机上同时进行离开和进入会出现闪白现象，暂时不启用离开动画
  transition-timing-function: cubic-bezier(0.5, 0, 1, 1);
}

.slide-opacity-show-enter {
  opacity: 0;
  width: 100%;
  transition-timing-function: ease-in;
}

.slide-opacity-show-leave-active {
  opacity: 0;
  //安卓手机上同时进行离开和进入会出现闪白现象，暂时不启用离开动画
  transition-timing-function: cubic-bezier(0.5, 0, 1, 1);
}

html {
  max-width: 32rem;
  margin: 0px auto;
}

.isApp {
  .nav-bar .icon-back {
    top: .65rem;
  }

  .my {
    .top-hd {
      padding: 114px 40px 64px;
    }
  }

  .van-image-preview__close-icon--top-right {
    top: 55px;
  }
}

.layui-table {}